<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>分布签收测试</title>
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">    
    <link href="/res/layui/css/layui.css" rel="stylesheet"/>
    <link href="/pages/signfor/html/step-lc/step.css" rel="stylesheet">
    <style>
        .layui-form-label {
            width: 58px;
        }
    </style>
</head>
<body>

    <div id="StepWrapper_wrapper"></div>

    <script src="/res/layui/layui.js"></script>
    <script>
        layui.config({
            base:'./'
        }).extend({
            step: 'step-lc/step'
        }).use([ 'form', 'step','laydate','jquery'], function (form, step) {
            var form = layui.form;
            let $ = layui.$;
            var laydate = layui.laydate;
            var Id=getQueryString("id");
            var signRecipients;
            var orderId;
            var orderState="已签收";
            var signArea;
            var signTel;
            var signTime;
            //在子页面中关闭弹出层
            function layerClose(){
                var index= parent.layer.getFrameIndex(window.name);
                parent.layer.close(index);
            }

            //日期
            laydate.render({
                elem: '#signTime_'
            });
            //查订单id是否签收
            let url='/logisticsSign/queryByOrderId';
            let date={orderId:Id,};
            $.ajax({
                type: 'get',
                url: url,
                data: date,
                async:false,
                dataType: 'json',
                success: function (response) {
                    if (response.code ==1){
                       if (response.data>0) {

                           //layer.msg('订单已经签收');
                           layerClose();
                           parent.layer.msg('订单已经签收');
                           //父页面提示信息

                       }
                    }
                }

            })



            let protocol = {
                _tpl: `
                    <div style="text-align: center">
                       <div class="layui-form-item">
                          <label class="layui-form-label">姓名</label>
                             <div class="layui-input-inline">
                                 <input type="text" id="clientName" name="clientName" lay-verify="required"  autocomplete="off" class="layui-input">
                             </div>
                        </div>
                         <div class="layui-form-item">
                          <label class="layui-form-label">订单编号</label>
                             <div class="layui-input-inline">
                                 <input type="text" id="orderNumber" name="orderNumber" lay-verify="required"  autocomplete="off" class="layui-input">
                             </div>
                        </div>
                         <div class="layui-form-item">
                          <label class="layui-form-label">货物类型</label>
                             <div class="layui-input-inline">
                                 <input type="text" id="cargoType" name="cargoType" lay-verify="required"  autocomplete="off" class="layui-input">
                             </div>
                        </div>
                         <div class="layui-form-item">
                          <label class="layui-form-label">订单金额</label>
                             <div class="layui-input-inline">
                                 <input type="text" id="orderPrice" name="orderPrice" lay-verify="required"  autocomplete="off" class="layui-input">
                             </div>
                        </div>


                        <button id="agree" class="layui-btn next layui-btn-sm layui-btn-normal">同意</button>
                        {{#
                            d.init()
                        }}
                    </div>
                `,
                ctx: {
                    init: () => {
                        console.info(Id);
                        let url='/logisticsOrder/selectID';
                        let date={orderId:Id};
                        $.ajax({
                            type: 'post',
                            url: url,
                            data: date,
                            dataType: 'json',
                            success: function (response) {
                                if (response.state ==1){
                                    console.info(response.data)
                                    $("#clientName").val(response.data.clientName);
                                    $("#orderNumber").val(response.data.orderNumber);
                                    $("#cargoType").val(response.data.cargoType);
                                    $("#orderPrice").val(response.data.orderPrice);
                                    signRecipients= response.data.clientName;
                                    orderId= response.data.orderId;
                                    signArea= response.data.orderBourn;
                                }else {

                                }
                            }

                        })
                        setTimeout(() => {
                            $('#agree').on('click', e => {
                               // console.info( "1+"+signRecipients+"+"+orderId+"+"+signArea);
                                step.next()
                            })
                        })
                    }
                }
            }
            
            let information = {
                _tpl: `
                    <div style="text-align: center; padding-right: 5em;">
                        <form class="layui-form">
                            <div class="layui-form-item">
                                <label class="layui-form-label">电话</label>
                                <div class="layui-input-block">
                                    <input type="text" class="layui-input" required 
                                    autocomplete="off"
                                    lay-verify="required" lay-vertype="tips" name="signTel" id="signTel"
                                    placeholder="填写电话" />
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <div class="layui-input-block">

                                    <button lay-submit lay-filter="demoSubmit" class="layui-btn layui-btn-sm layui-btn-normal">确定</button>
                                </div>
                            </div>
                        </form>
                        {{#
                            d.init()
                        }}
                    </div>
                `,
                ctx: {
                    init: () => {
                        //console.info("2+"+ signRecipients+"+"+orderId+"+"+signArea);
                       // signTel=$("#signTel").val();
                        form.on('submit(demoSubmit)', data => {
                            signTel=$("#signTel").val();
                            //console.info("3+"+ signRecipients+"+"+orderId+"+"+signArea+"+"+signTel+"+"+signTime);
                            let url='/logisticsSign/insertAndUpdate';
                            let date={signRecipients:signRecipients,orderId:orderId,signArea:signArea,signTel:signTel};
                            $.ajax({
                                type: 'post',
                                url: url,
                                data: date,
                                dataType: 'json',
                                success: function (response) {
                                    if (response.state ==1){
                                        layer.msg('保存成功');
                                        //layerClose();
                                       /* parent.table.reload('dataListTable');
                                        //父页面提示信息
                                        parent.layer.msg(response.msg);*/
                                    }else {
                                        layerClose();
                                        parent.table.reload('dataListrece');
                                        //父页面提示信息
                                        parent.layer.msg("保存失败！请重新签收");
                                    }
                                }
                            })
                            step.next()
                            return false
                        })
                    }
                }
            }
            
            let result = {
                _tpl: `
                    <div style="text-align: center">
                        <div>
                            <i class="layui-icon layui-icon-ok" style="font-size: 50px; color: #5FB878;"></i>  
                        </div>
                        <button id="again" class="layui-btn layui-btn-normal">确认</button>
                        {{#
                            d.init()
                        }}
                    </div>
                `,
                ctx: {
                    init: () => {
                        setTimeout(() => {
                            $('#again').on('click', e => {
                                let url='/logisticsOrder/addOrUpdata';
                                let date={orderId:orderId,orderState:orderState};
                                $.ajax({
                                    type: 'post',
                                    url: url,
                                    data: date,
                                    dataType: 'json',
                                    success: function (response) {
                                        if (response.state ==1){
                                            layer.msg('保存成功');
                                            layerClose();
                                            parent.table.reload('dataListrece');
                                             //父页面提示信息
                                            parent.layer.msg("签收成功");
                                            //form.render();
                                        }else {
                                            layerClose();
                                            parent.layer.msg("签收失败");
                                           // form.render();
                                        }
                                    }
                                })
                            })
                        })

                    }
                }
            }

            step.run({
                elem: '#StepWrapper_wrapper',
                stepWidth: '20rem',
                contentWidth: '22rem',
                contentHeight: '36rem',
                nodes: [
                    {
                        tip: '确认订单',
                    },
                    {
                        tip: '请填写信息',
                    },
                    {
                        tip: '确认签收',
                    }
                ],
                contents: [protocol, information, result]
            })

            function getQueryString(name){
                var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                if(r!=null)return  unescape(r[2]); return null;
            }
        })
    </script>
</body>
</html>
